<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="加载中"></u-loading-page>
		<view v-if="!loadding" class="">
			<u-sticky>
				<view class="search">
					<u-search bgColor="#ffffff" placeholder="请输入终端系列号" @custom="search" @search="search" v-model="keyword"></u-search>
				</view>
			</u-sticky>
			<view v-if="data !== undefined && data!== null && data.length>0" class="main">
				<view v-for="(item,index) in data" :key="index" class="item" @click="rateEdit(item)">
					<view class="left">
						<view class="sn">
							{{item.sn}}
						</view>
						<view class="names">
							{{item.name}}
						</view>
					</view>
					<view class="right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				bottom: true,
				data: [],
				keyword: '',
				rate_setting_id: '',
				product_id: '',
				userinfo: {},
				page: 1,
				page_size: 10
			}
		},
		onLoad(e) {
			this.userinfo = uni.getStorageSync('userinfo')
			this.rate_setting_id = e.id
			this.product_id = e.pid
			uni.setNavigationBarTitle({
				title: e.name + ' - 终端'
			})
			this.loadData()
		},
		//下拉刷新
		onReachBottom() {
			if (this.bottom == true) {
				this.page++
				this.loadData()
			}
		},
		methods: {
			search() {
				this.page = 1
				this.bottom = true
				this.loadData()
			},
			rateEdit(item) {
				uni.navigateTo({
					url: '/pages/mine/rate/rateedit?id=' + this.rate_setting_id + '&sn=' + item.sn + '&name=' + item.name
				})
			},
			async loadData() {
				var that = this
				const {
					data: res
				} = await this.$myHttp({
					url: 'Terminal/getMyTerminal',
					data: {
						product_id: that.product_id,
						sn: that.keyword,
						page: that.page,
						page_size: that.page_size
					},
					header: {
						'token': that.userinfo.token
					},
				});
				that.loadding = false
				if (res.code == 1) {
					if (res.data !== undefined && res.data !== null && res.data.length >
						0) {
						if (this.page == 1) {
							this.data = res.data
						} else {
							this.data = [...this.data, ...res.data]
						}
						if (res.data.length < this.page_size) {
							this.bottom = false
						}
					} else {
						this.bottom = false
					}
				} else {
					this.bottom = false
				}
				console.log(this.data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.search {
		padding: 20rpx;
	}

	.main {
		padding: 0 20rpx;

		.item {
			border-radius: 14rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.left {
				.sn {
					font-weight: bold;
					font-size: 28rpx;
				}

				.names {
					padding-top: 10rpx;
					font-size: 24rpx;
					color: #909399;
				}
			}

			.right {
				display: flex;
				justify-items: center;
			}
		}
	}
</style>